<script setup lang="ts">
import {watch, watchEffect} from "vue";

// const props = defineProps({
//   title: String,
// });
//props 响应式解构
const {title} = defineProps({
  title: String,
});

//报错！
//我们给 watch 传递的是一个值而不是响应式数据源。实际上，Vue 的编译器会捕捉这种情况并发出警告
//"title" is a destructured prop and should not be passed directly to watch().
// Pass a getter () => title instead
// watch(title,()=>{
//   console.log(title);
// })
// 改变：
// watch(() => title, () => {
//   console.log(title);
// })

watchEffect(() => {
  console.log(title)//效果与下面表达式相同
  // console.log(props.title);
})
</script>

<template>
  <div class="rounded-3  shadow mt-3 p-3 border">{{ title }}</div>
</template>

<style scoped>

</style>